<!-- 模块说明 -->

<template>
  <div>
    <Forms 
      :form-options="data.options"
      @getForms="(_d) => (data.formRefs = _d)"
      :config="data.formConfig"
    >
      <template #diySolt>
        插槽名称就是字段名称
      </template>
    </Forms>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { checkForm } from '@/components/Forms/tool'
const data = reactive({
  formConfig: { inline: true, labelWidth: '120px', formItemWidth: '30%', rules: true },
  formRefs: {},
  options: [
    {
      type: 'input',
      label: '输入框',
      prop: 'input'
    },
    {
      type: 'inputNumber',
      label: '数字输入框',
      prop: 'inputNumber',
      attrs: {
        //属性写这里
        min: 1,
        max: 10
      },
      attrsFun: {
        //方法写这里
        change: (e) => {
          console.log(e)
        }
      }
    },
    {
      type: 'select',
      label: '下拉框',
      prop: 'select',
      attrs: {
        clearable: true
      },
      option: {
        type: 'option',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' }]
      }
    },
    {
      type: 'radioGroup',
      label: '单选框',
      prop: 'radioGroup',
      option: {
        type: 'radio',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' }]
      }
    },
    {
      type: 'rate',
      label: '评分',
      prop: 'rate',
      attrs: {
        colors: 5
      }
    },
    {
      type: 'slider',
      label: '滑块',
      prop: 'slider'
    },
    {
      type: 'switch',
      label: '开关',
      prop: 'switch'
    },
    {
      type: 'checkbox-group',
      label: '多选框',
      prop: 'checkboxGroup',
      formItemWidth: '100%',
      option: {
        type: 'checkbox',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: ';lisi' }, { label: '王五', value: 'wangwu' }, { label: '王五1', value: 'wangwu1' }, { label: '王五2', value: 'wangwu2' }]
      }
    },
    {
      type: 'date-picker',
      label: '时间选择',
      dateType: 'daterange',
      prop: 'promisePayDate', //随便写但同一个form不允许重复
      mapping: ['promisePayDateStart', 'promisePayDateEnd']//返回字段的映射值
    },
    {
      type: 'button',
      label: '按钮',
      formItemWidth: '100%',
      options: [
        {
          text: '提交1',
          type: 'primary',
          click() {
            // checkForm 辅助校验表单规则 可以接受多个表单实例
            checkForm([data.formRefs._form], () => {
              console.log(data.formRefs._get())//获取表单的值
            })
          }
        },
        {
          text: '提交2',
          type: 'primary',
          click: async()=> {
            console.log(await checkForm([data.formRefs._form]))
          }
        },
        {
          text: '重置',
          type: 'warning',
          click() {
            data.formRefs._set(() => {
              console.log('回调')
            })
          }
        },
        {
          text: '赋值',
          type: 'warning',
          click() {
            data.formRefs._set({ input: '张三', inputNumber: 9, select: 'zhangsan' })
          }
        }
      ]
    }
  ]
})
 
</script>
<style lang="scss" scoped>
 
</style>